/**
* tab页面
*/
<template>
  <el-menu class="menu-tab" mode="horizontal" text-color="#fff" active-text-color="#fff">
    <el-tabs v-model="model" type="card" @tab-click="tabClick" @tab-remove="removeTab">
      <el-tab-pane v-for="(item, index) in tabs" :closable="item.label != '首页'" :key="item.name"
                   :label="item.label" :name="item.name">
        <div class="container">
          <router-view></router-view>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-menu>
</template>
<script>
  export default {
    name: 'navcon',
    data() {
      return {
        collapsed: true,
        tabs: [
          {label: '首页', name: '/admin/index'}
        ]
      }
    },
    // 创建完毕状态(里面是操作)
    created() {
      let tabs = JSON.parse(sessionStorage.getItem('tabs'))
      if (tabs !== null) {
        for (let i = 0; i < tabs.length; i++) {
          this.tabs.push(tabs[i])
        }
      }
      let path = sessionStorage.getItem('path')
      if (path !== null) {
        this.path = path
        this.model = path
      }
      this.watchTab()
    },
    methods: {
      watchTab() {
        var self = this
        window.addEventListener('setItem', () => {
          setTimeout(() => {
            let tabs = JSON.parse(sessionStorage.getItem('tabs'))
            if (tabs !== null) {
              self.tabs = []
              self.tabs.push({label: '首页', name: '/admin/index'})
              for (let i = 0; i < tabs.length; i++) {
                self.tabs.push(tabs[i])
              }
            }
          }, 50)
        })
      },
      tabClick(tab) {
        window.sessionStorage.setItem('path', tab.name)
        if (this.model == this.path) {
          return
        }
        this.$router.push(this.model)//路由跳转
        this.path = this.model
      },
      removeTab(remPath) {
        setTimeout(() => {
          let tabs = this.tabs
          let activeName = this.model
          // 删除当前选中的标签页
          // 那么遍历出当前选中path的上一个或者下一个path，
          if (activeName === remPath) {
            try {
              tabs.forEach((tab, index) => {
                if (tab.name === remPath) {
                  let nextTab = this.tabs[index + 1] || this.tabs[index - 1]
                  if (nextTab) {
                    // 把最新选中的path给它
                    activeName = nextTab.name
                  }
                  throw Error()
                }
              })
            } catch (e) {
              console.log('结束循环')
            }
          }
          // 如果是删除当前选中的标签页，那么this.model与activeName就不相等
          // 就需要进行路由跳转
          if (this.model !== activeName) {
            this.$router.push(activeName)//路由跳转
          }
          // 重置tabs与model
          this.model = activeName
          this.tabs = tabs.filter(tab => tab.name !== remPath)

          // 修改session的tabs与path
          window.sessionStorage.setItem('path', activeName)

          let tabss = JSON.parse(sessionStorage.getItem('tabs'))
          tabss.some(function (item, i) {
            if (item.name == remPath) {
              tabss.splice(i, 1)
              return true
            }
          })
          window.sessionStorage.setItem('tabs', JSON.stringify(tabss))
          // tab页为空是跳回首页
          if (tabss.length == 0){
            this.$router.push("/admin/index")//路由跳转
          }
        }, 50)
      },
    }
  }
</script>
<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }

  .submenu {
    float: right;
  }

  .buttonimg {
    height: 60px;
    /*background-color: transparent;*/
    border: none;
  }

  .showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
  }

  .showimg:active {
    border: none;
  }
  .container {
    padding: 20px;
  }

</style>
